<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>tbdcalendar</title>
    <link rel="stylesheet" href="tbdcalendar.css">
    <style>
      body{font-size: 14px;}
      strong{ color:#900;}
    </style>
</head>
<body>
	<h2 style=" margin:50px;">日历控件效果一（文本框焦点处理）</h2>
    
    <p style=" margin:50px;">效果1 <strong>最基本日历控件</strong> 选择日期：<input type="text" id="date1" value="" style="height:40px; line-height:40px;width:196px;"/><br />调用方法：<span>Tbdcalendar("date1",{top:0,left:200,clickhide:false,splits:"-",isnull:true,ymd:null,hm:false,speedmonth:false,speedyear:false});</span></p>
    
    <p style=" margin:50px;">效果1 <strong>最基本日历控件 /分割</strong> 选择日期：<input type="text" id="date2" value="" style="height:40px; line-height:40px;width:196px;"/><br />调用方法：<span>Tbdcalendar("date2",{top:40,left:0,clickhide:false,splits:"/",isnull:true,ymd:null,hm:false,speedmonth:false,speedyear:false});</span></p>

    <p style=" margin:50px;">效果1 <strong>最基本日历控件 空格分割</strong> 选择日期：<input type="text" id="date3" value="" style="height:40px; line-height:40px;width:196px;"/><br />调用方法：<span>Tbdcalendar("date3",{top:40,left:0,clickhide:false,splits:" ",isnull:true,ymd:null,hm:false,speedmonth:true,speedyear:false});</span></p>

    <p style=" margin:50px;">效果2 <strong>显示上下月份信息</strong> 选择日期：<input type="text" id="date4" value="" style="height:40px; line-height:40px;width:196px;"/><br />调用方法：<span>Tbdcalendar("date4",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:null,hm:false,speedmonth:false,speedyear:false});</span></p>

    <p style=" margin:50px;">效果3 <strong>指定初始日期</strong> 选择日期：<input type="text" id="date5" value="" style="height:40px; line-height:40px;width:196px;"/><br />调用方法：<span>Tbdcalendar("date5",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:"2016/3/6",hm:false,speedmonth:false,speedyear:false});</span></p>

    <p style=" margin:50px;">效果4 <strong>带有时、分具体时间设置</strong> 选择日期：<input type="text" id="date6" value="" style="height:40px; line-height:40px;width:196px;"/><br />调用方法：<span>Tbdcalendar("date6",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:null,hm:true,speedmonth:false,speedyear:false});</span></p>

    <p style=" margin:50px;">效果5 <strong>选择日期后隐藏日历控件</strong> 选择日期：<input type="text" id="date8" value="" style="height:40px; line-height:40px;width:196px;"/><br />调用方法：<span>Tbdcalendar("date8",{top:40,left:0,clickhide:true,splits:"-",isnull:false,ymd:null,hm:false,speedmonth:false,speedyear:false});</span></p>
    
    <p style=" margin:50px;">效果6 <strong>快捷年月份设置</strong> 选择日期：<input type="text" id="date7" value="" style="height:40px; line-height:40px;width:196px;"/><br />调用方法：<span>Tbdcalendar("date7",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:null,hm:false,speedmonth:true,speedyear:true});</span></p>
    
    <p style=" margin:50px;">效果6 <strong>快捷月份设置</strong> 选择日期：<input type="text" id="date9" value="" style="height:40px; line-height:40px;width:196px;"/><br />调用方法：<span>Tbdcalendar("date7",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:null,hm:false,speedmonth:true,speedyear:true});</span></p>
    
    <p style=" margin:50px;">效果6 <strong>快捷年份设置</strong> 选择日期：<input type="text" id="date10" value="" style="height:40px; line-height:40px;width:196px;"/><br />调用方法：<span>Tbdcalendar("date7",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:null,hm:false,speedmonth:true,speedyear:true});</span></p>

    <p style=" margin:50px;"><a href="http://my.oschina.net/tbd/blog" target="_blank">作者博客</a></p>
	
    <!--<h2 style=" margin:50px;">日历控件效果二（按钮点击处理）</h2>-->
    
</body>
<script type="text/javascript" src="tbdcalendar.js"></script>
<script type="text/javascript">
window.onload=function(){

	Tbdcalendar("date1",{top:0,left:200,clickhide:false,splits:"-",isnull:true,ymd:null,hm:false,speedmonth:false,speedyear:{is:false,interval:3}});

	Tbdcalendar("date2",{top:40,left:0,clickhide:false,splits:"/",isnull:true,ymd:null,hm:false,speedmonth:false,speedyear:{is:false,interval:3}});

	Tbdcalendar("date3",{top:40,left:0,clickhide:false,splits:" ",isnull:true,ymd:null,hm:false,speedmonth:false,speedyear:{is:false,interval:3}});

	Tbdcalendar("date4",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:null,hm:false,speedmonth:false,speedyear:{is:false,interval:3}});

	Tbdcalendar("date5",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:"2016/3/16",hm:false,speedmonth:false,speedyear:{is:false,interval:3}});

	Tbdcalendar("date6",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:null,hm:true,speedmonth:false,speedyear:{is:false,interval:3}});

  	Tbdcalendar("date7",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:null,hm:false,speedmonth:true,speedyear:{is:true,interval:5}});
	
	Tbdcalendar("date8",{top:40,left:0,clickhide:true,splits:"-",isnull:false,ymd:null,hm:false,speedmonth:false,speedyear:{is:false,interval:3}});
	
	Tbdcalendar("date9",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:null,hm:false,speedmonth:true,speedyear:{is:false,interval:3}});
	
	Tbdcalendar("date10",{top:40,left:0,clickhide:false,splits:"-",isnull:false,ymd:null,hm:false,speedmonth:false,speedyear:{is:true,interval:3}})

};
</script>
</html>
